import React from 'react';
import { Icon } from 'antd';
import styles from './index.less';

export default detailData => {
    const {
        leftTitle = '重评申请', // 左半部分标题名称
        fileProp = 'taskReScoreFile', // 附件存放的字段名
        applyEmployeeName,
        applyReason,
        auditEmployeeName,
        auditResult,
        auditTime
    } = detailData;
    const showEllipsisText = (text, width = '100%') => (
        <div style={{ width }} title={text}>
            <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{text}</div>
        </div>
    );
    const HalfListItem = ({ label, children }) => (
        <div className={styles.halfListItem}>
            <span>{label}：</span>
            <span>{children}</span>
        </div>
    );
    const getDetailFile = (taskScoreFile = []) => {
        if (taskScoreFile && taskScoreFile.length > 0) {
            return taskScoreFile.map(item => (
                <div className={styles.detailAttachFile} title={item.originName}>
                    <div>
                        <a href={item.url}>{item.originName}</a>
                    </div>
                    <div>
                        <a href={item.url}>
                            <Icon type="download"></Icon>
                        </a>
                    </div>
                </div>
            ));
        }
        return '无';
    };
    return (
        <div className={styles.reRateInfo}>
            <div className={styles.half} style={{ width: auditEmployeeName ? '50%' : '100%' }}>
                <div className={styles.halfTitle}>{leftTitle}</div>
                <div className={styles.divider}></div>
                <HalfListItem label="申请人">{applyEmployeeName}</HalfListItem>
                <HalfListItem label="原因">{showEllipsisText(applyReason)}</HalfListItem>
                <HalfListItem label="附件">{getDetailFile(detailData[fileProp])}</HalfListItem>
            </div>
            {auditEmployeeName && (
                <div className={styles.half}>
                    <div className={styles.halfTitle}>审核信息</div>
                    <div className={styles.divider}></div>
                    <HalfListItem label="审核人">{auditEmployeeName}</HalfListItem>
                    <HalfListItem label="审核结果">{auditResult}</HalfListItem>
                    <HalfListItem label="审核时间">{auditTime}</HalfListItem>
                </div>
            )}
        </div>
    );
};
